<!-- z-paging聊天item -->

<template>
    <view class="chat-item">
        <text class="chat-time" v-if="item.time && item.time.length">
            {{ item.time }}
        </text>
        <view :class="{ 'chat-container': true, 'chat-location-me': item.isMe }">
            <view class="chat-icon-container">
                <!-- <image class="chat-icon" :src="item.icon" mode="aspectFill" /> -->
                <image class="chat-icon" :src="item.icon" mode="aspectFill" />
            </view>
            <view class="chat-content-container">
                <text :class="{ 'chat-user-name': true, 'chat-location-me': item.isMe }">
                    {{ item.name }}
                </text>
                <view class="chat-text-container-super" :style="[{ justifyContent: item.isMe ? 'flex-end' : 'flex-start' }]">
                    <view
                        :class="{
                            'chat-text-container': true,
                            'chat-text-container-four': item.type == 4,
                            'chat-text-container-me': item.isMe,
                            'chat-image-container': item.type != 1,
                            'chat-border-container': item.type > 2
                        }"
                    >
                        <text :class="{ 'chat-text': true, 'chat-text-me': item.isMe }">
                            <template v-if="item.sendType == 2">
                                <image v-if="item.type === 2" @tap="viewImg(item.content)" :src="item.content" style="height: 200rpx; width: 200rpx; margin-left: 20rpx"></image>
                                <template v-else>
                                    <u-link v-if="/^http/.test(item.content)" :href="item.content">
                                        {{ item.content }}
                                    </u-link>
                                    <text v-else @longpress="copy(item.content)">
                                        {{ item.content }}
                                    </text>
                                </template>
                            </template>
                            <!-- 用户消息类型（1文字 2图片 3订单 4商品）-->
                            <template v-else>
                                <template v-if="item.type == 1">
                                    <u-link v-if="/^http/.test(item.content)" :href="item.content">
                                        {{ item.content }}
                                    </u-link>
                                    <text v-else @longpress="copy(item.content)">
                                        {{ item.content }}
                                    </text>
                                </template>
                                <template v-if="item.type == 2">
                                    <image @tap="viewImg(item.content)" :src="item.content" style="margin-left: 8rpx; max-height: 200px" mode="heightFix"></image>
                                </template>
                                <template v-if="item.type == 3">
                                    <view @click="open(item)" class="order-contanier">
                                        <view class="title">订单信息</view>
                                        <view class="order-content">
                                            <image class="order-image" :src="item.content[0]"></image>
                                            <view class="order-info">
                                                <view class="order-info-text">
                                                    {{ item.content[1] }}
                                                </view>
                                                <view class="order-info-money">
                                                    <text style="font-size: 22rpx">￥</text>
                                                    {{ item.content[5] }}
                                                </view>
                                            </view>
                                        </view>
                                        <view style="color: #999; margin-top: 10rpx; margin-left: 12rpx">
                                            <view>订单数量：{{ item.content[3] }}</view>
                                            <view style="margin-top: 10rpx">订单时间：{{ item.content[4] }}</view>
                                        </view>
                                    </view>
                                </template>
                                <template v-if="item.type == 4">
                                    <view @click="open(item)" style="width: 100%; background: #fff; height: max-content; border-radius: 10rpx; overflow: hidden; padding: 0">
                                        <image :src="item.content[0]" mode="heightFix" style="max-height: 500rpx"></image>
                                        <view style="padding: 10rpx 20rpx 10rpx; font-size: 34rpx">
                                            <view style="color: #ed5732; font-size: 28rpx">
                                                <text style="font-size: 22rpx">￥</text>
                                                {{ item.content[2] }}
                                            </view>
                                            <view style="overflow: hidden; width: 100%; font-size: 28rpx; color: #333; word-break: break-all; white-space: pre-wrap">
                                                {{ item.content[1] }}
                                            </view>
                                        </view>
                                    </view>
                                </template>
                            </template>
                        </text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'chat-item',
    props: {
        item: {
            type: Object,
            default: function () {
                return {
                    time: '',
                    icon: '',
                    name: '',
                    content: '',
                    isMe: false
                };
            }
        }
    },
    data() {
        return {};
    },
    methods: {
        open(item) {
            if (item.type == 4) {
                let productId = item.content[3];
                uni.navigateTo({
                    url: '/pagesClass-rich/product/product?productId=' + productId
                });
            } else {
                let orderId = item.content[2];
                uni.navigateTo({
                    url: '/pagesMy/orderDetail-rich/orderDetail-rich?orderId=' + orderId
                });
            }
        },
        copy(content) {
            uni.showModal({
                title: '温馨提示',
                content: '确认要复制此文字吗？',
                showCancel: true,
                cancelText: '关闭',
                confirmText: '确认',
                success: (res) => {
                    if (res.confirm) {
                        uni.setClipboardData({
                            data: content,
                            success: (r) => {
                                this.$queue.showToast('复制成功');
                            }
                        });
                    }
                }
            });
        },
        viewImg(img) {
            uni.previewImage({
                current: 0,
                urls: [img]
            });
        }
    }
};
</script>

<style scoped lang="scss">
.chat-item {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
}

.chat-time {
    padding: 4rpx 0rpx;
    text-align: center;
    font-size: 22rpx;
    color: #aaaaaa;
}

.chat-container {
    display: flex;
    flex-direction: row;
}

.chat-location-me {
    flex-direction: row-reverse;
    text-align: right;
}

.chat-icon-container {
    margin-top: 12rpx;
}

.chat-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #eeeeee;
}

.chat-content-container {
    margin: 0rpx 15rpx;
    max-width: 75%;
}

.chat-user-name {
    font-size: 26rpx;
    color: #888888;
}

.chat-text-container {
    text-align: left;
    background-color: #f1f1f1;
    border-radius: 8rpx;
    padding: 10rpx 15rpx;
    margin-top: 10rpx;
}

.chat-image-container {
    background-color: #fff !important;
    padding: 0;
    border-radius: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.15);
    &.chat-border-container {
        border-radius: 20rpx;
    }
}

.chat-text-container-me {
    background-color: #007aff;
}

.chat-text-container-super {
    display: flex;
    flex-direction: row;
}

.chat-text {
    font-size: 28rpx;
    /* #ifndef APP-NVUE */
    word-break: break-all;
    /* #endif */
    /* #ifdef APP-NVUE */
    max-width: 500rpx;
    /* #endif */
}

.chat-text-me {
    color: white;
}
.order-contanier {
    background: #fff;
    height: max-content;
    border-radius: 20rpx;
    padding: 5rpx 15rpx 5rpx 10rpx;
    margin: 10rpx 0;
    .title {
        color: #000;
        font-weight: 600;
        margin-left: 10rpx;
    }
    .order-content {
        display: flex;
        align-items: center;
        height: 110rpx;
        margin-top: 10rpx;
        .order-image {
            margin-left: 8rpx;
            width: 110rpx;
            height: 100%;
        }
        .order-info {
            height: 100%;
            padding: 10rpx;
            width: 100%;
            flex: 1;
            background: #f5f5f5;
            margin-left: 10rpx;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            .order-info-text {
                font-size: 28rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                width: 100%;
                color: #333;
            }
            .order-info-money {
                color: #ed5732;
                font-size: 28rpx;
                line-height: 1.5;
            }
        }
    }
}
</style>
